React useEvent: Ổn định các trình xử lý sự kiện cho các ứng dụng mạnh mẽ

Sử dụng `useEvent` trong thực tế

Hãy xem xét lại các ví dụ trước và áp dụng `useEvent` để giải quyết các vấn đề.

Sửa lỗi Closure lỗi thời

            
import React, { useState, useEffect, useCallback } from 'react';

function useEvent(handler) {
    const handlerRef = React.useRef(handler);

    React.useLayoutEffect(() => {
        handlerRef.current = handler;
    }, [handler]);

    return React.useCallback((...args) => {
        // @ts-expect-error because arguments might be incorrect
        return handlerRef.current(...args);
    }, []);
}

function MyComponent() {
  const [count, setCount] = useState(0);
  const [alertCount, setAlertCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  const handleClick = useEvent(() => {
    setAlertCount(count);
    alert(`Count is: ${count}`);
  });

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Show Count</button>
      <p>Alert Count: {alertCount}</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Bây giờ, `handleClick` là một hàm ổn định, nhưng khi được gọi, nó truy cập giá trị `count` mới nhất thông qua ref. Điều này ngăn chặn vấn đề closure lỗi thời.

Ngăn chặn Re-render không cần thiết

            
import React, { useState, memo, useCallback } from 'react';

function useEvent(handler) {
  const handlerRef = React.useRef(handler);

    React.useLayoutEffect(() => {
        handlerRef.current = handler;
    }, [handler]);

    return React.useCallback((...args) => {
        // @ts-expect-error because arguments might be incorrect
        return handlerRef.current(...args);
    }, []);
}

const ChildComponent = memo(({ onClick }) => {
  console.log('ChildComponent re-rendered');
  return <button onClick={onClick}>Click Me</button>;
});

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useEvent(() => {
    setCount(count + 1);
  });

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}

export default ParentComponent;

            

              
                Copy
              
            
          

Bởi vì `handleClick` bây giờ là một tham chiếu hàm ổn định, `ChildComponent` sẽ chỉ re-render khi các prop của nó *thực sự* thay đổi, giúp cải thiện hiệu suất.

Các cách triển khai thay thế và những cân nhắc

`useEvent` với `useLayoutEffect`

Trong một số trường hợp, bạn có thể cần sử dụng `useLayoutEffect` thay vì `useEffect` trong quá trình triển khai `useEvent`. `useLayoutEffect` kích hoạt đồng bộ sau tất cả các thay đổi DOM, nhưng trước khi trình duyệt có cơ hội vẽ. Điều này có thể quan trọng nếu trình xử lý sự kiện cần đọc hoặc sửa đổi DOM ngay sau khi sự kiện được kích hoạt. Điều chỉnh này đảm bảo rằng bạn nắm bắt trạng thái DOM cập nhật nhất trong trình xử lý sự kiện của mình, ngăn chặn sự không nhất quán tiềm ẩn giữa những gì component của bạn hiển thị và dữ liệu mà nó sử dụng. Việc lựa chọn giữa `useEffect` và `useLayoutEffect` phụ thuộc vào các yêu cầu cụ thể của trình xử lý sự kiện và thời gian cập nhật DOM.

            
import { useRef, useCallback, useLayoutEffect } from 'react';

function useEvent(handler) {
  const handlerRef = useRef(handler);

  useLayoutEffect(() => {
    handlerRef.current = handler;
  }, [handler]);

  return useCallback((...args) => {
    handlerRef.current(...args);
  }, []);
}

            

              
                Copy
              
            
          

Những lưu ý và vấn đề tiềm ẩn

• Độ phức tạp: Mặc dù `useEvent` giải quyết các vấn đề cụ thể, nhưng nó làm tăng thêm một lớp phức tạp cho mã của bạn. Điều quan trọng là phải hiểu các khái niệm cơ bản để sử dụng nó một cách hiệu quả.
• Lạm dụng: Đừng sử dụng `useEvent` một cách bừa bãi. Chỉ áp dụng nó khi bạn gặp phải các closure lỗi thời hoặc re-render không cần thiết liên quan đến trình xử lý sự kiện.
• Kiểm thử: Kiểm thử các component sử dụng `useEvent` đòi hỏi sự chú ý cẩn thận để đảm bảo rằng logic trình xử lý chính xác đang được thực thi. Bạn có thể cần mock hook `useEvent` hoặc truy cập trực tiếp `handlerRef` trong các bài kiểm thử của mình.

Góc nhìn toàn cầu về xử lý sự kiện

Khi xây dựng ứng dụng cho đối tượng toàn cầu, điều quan trọng là phải xem xét sự khác biệt về văn hóa và các yêu cầu về khả năng tiếp cận trong xử lý sự kiện:

• Điều hướng bằng bàn phím: Đảm bảo rằng tất cả các phần tử tương tác có thể truy cập được thông qua điều hướng bằng bàn phím. Người dùng ở các khu vực khác nhau có thể phụ thuộc vào điều hướng bằng bàn phím do khuyết tật hoặc sở thích cá nhân.
• Sự kiện chạm: Hỗ trợ các sự kiện chạm cho người dùng trên thiết bị di động. Cân nhắc các khu vực mà quyền truy cập internet di động phổ biến hơn quyền truy cập máy tính để bàn.
• Phương thức nhập liệu: Lưu ý đến các phương thức nhập liệu khác nhau được sử dụng trên khắp thế giới, chẳng hạn như các phương thức nhập liệu tiếng Trung, tiếng Nhật và tiếng Hàn. Kiểm thử ứng dụng của bạn với các phương thức nhập liệu này để đảm bảo rằng các sự kiện được xử lý đúng cách.
• Khả năng tiếp cận: Luôn tuân thủ các thực hành tốt nhất về khả năng tiếp cận, đảm bảo các trình xử lý sự kiện của bạn tương thích với trình đọc màn hình và các công nghệ hỗ trợ khác. Điều này đặc biệt quan trọng đối với trải nghiệm người dùng toàn diện trên các nền văn hóa đa dạng.
• Múi giờ và định dạng ngày/giờ: Khi xử lý các sự kiện liên quan đến ngày và giờ (ví dụ: công cụ lập lịch, lịch hẹn), hãy lưu ý đến múi giờ và định dạng ngày/giờ được sử dụng ở các khu vực khác nhau. Cung cấp các tùy chọn để người dùng tùy chỉnh các cài đặt này dựa trên vị trí của họ.

Các lựa chọn thay thế cho `useEvent`

Mặc dù `useEvent` là một kỹ thuật mạnh mẽ, nhưng có những cách tiếp cận thay thế để quản lý các trình xử lý sự kiện trong React:

• Nâng cấp trạng thái (Lifting State): Đôi khi, giải pháp tốt nhất là nâng trạng thái mà trình xử lý sự kiện phụ thuộc lên một component cấp cao hơn. Điều này có thể đơn giản hóa trình xử lý sự kiện và loại bỏ nhu cầu sử dụng `useEvent`.
• `useReducer`:** Nếu logic trạng thái của component của bạn phức tạp, `useReducer` có thể giúp quản lý các cập nhật trạng thái dễ dự đoán hơn và giảm khả năng xảy ra closure lỗi thời.
• Class Components: Mặc dù ít phổ biến hơn trong React hiện đại, class component cung cấp một cách tự nhiên để ràng buộc các trình xử lý sự kiện với thể hiện component, tránh vấn đề closure.
• Hàm nội tuyến với Dependencies: Sử dụng các lệnh gọi hàm nội tuyến với dependencies để đảm bảo các giá trị mới được truyền đến các trình xử lý sự kiện. `onClick={() => handleClick(arg1, arg2)}` với `arg1` và `arg2` được cập nhật qua state sẽ tạo ra hàm ẩn danh mới trong mỗi lần render, do đó đảm bảo các giá trị closure được cập nhật, nhưng sẽ gây ra các re-render không cần thiết, chính là vấn đề mà `useEvent` giải quyết.